<template>
  <div id="index">
    <div class="wrapper">
      <div class="img">
        <img src="@/assets/img/banner.png">
      </div>
      <div class="btn-box" v-if="show">
        <div>
          <input class="btn-text" type="text" placeholder="输入关联密码" v-model="vaule">
        </div>
        <div class="start" @click="updata()">开始关联</div>
      </div>
       <div class="btn-box" v-else>
        <div>
          <h2>绑定房号：{{vaule1}}</h2>
        </div>
        <div class="start" @click="unupdata()">解除绑定</div>
      </div>

    </div>
  </div>
</template>

<script>
import apis from '../../../static/js/apis'
import { querystring } from 'vux'
export default {
  data () {
    return {
      vaule: '',
      vaule1: '',
      userid: '',
      roomid: '',
      useridobj: {},
      show: true
    }
  },
  created () {
    this.useridobj = querystring.parse()
    this.userid = this.useridobj.wxuserinfoid
    this.getupdata()
  },
  methods: {
    getupdata () {
      this.$axios
        .post(
          apis + '/shenglian-fast/app/weixinapp/getroomuser', {
            userid: this.userid
          }).then(response => {
          if (response.data.msg === 'success') {
            this.vaule1 = response.data.roominfo.roomcode
            this.roomid = response.data.roominfo.id
            if (this.vaule1 === '') {
              this.show = true
            } else {
              this.show = false
            }
          }
        })
    },
    updata () {
      if (this.vaule !== '') {
        this.$axios
          .post(
            apis + '/shenglian-fast/app/weixinapp/bindroom', {
              key: this.vaule,
              userid: this.userid
            }).then(response => {
            // console.log(response)
            if (response.data.msg === 'success') {
              this.vaule1 = response.data.roominfo.roomcode
              this.roomid = response.data.roominfo.id
              this.show = false
              this.$dialog.toast({mes: '绑定成功', timeout: 1000})
            } else {
              this.$dialog.toast({mes: '绑定失败，请稍后再试!', timeout: 1000})
            }
          })
      } else {
        this.$dialog.toast({mes: '请输入信息再绑定!', timeout: 1000})
      }
    },
    unupdata () {
      this.$axios
        .post(
          apis + '/shenglian-fast/app/weixinapp/rebindroom', {
            roomid: this.roomid,
            userid: this.userid
          }).then(response => {
          if (response.data.msg === 'success') {
            this.vaule1 = ''
            this.vaule = ''
            this.show = true
            this.$dialog.toast({mes: '解绑成功', timeout: 1000})
          } else {
            this.$dialog.toast({mes: '解绑失败，请稍后再试!', timeout: 1000})
          }
        })
    }
  }
}
</script>

<style scoped>
.wrapper {
 overflow: hidden;
}
.img {
  margin:105px 0 105px 0;
  display: flex;
  justify-content: center;
}
.img img {
  height: 132px;
  width: 142px;
  margin:0 auto;
}
.btn-box {
  margin-top: -7px;
}
.btn-box {
  width: 100%;
  text-align: center;
}
.btn-box input {
  width: 250px;
  padding: 16px 44px;
  border: 1px solid #D7D7D7;
  border-radius: 10px;
  color: #999;
  outline-style: none;
  text-align: center;
  margin: 10px auto;
}
.btn-box h2{
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 40px;
}
.start {
  width: 250px;
  padding: 16px 44px;
  border-radius: 10px;
  font-size: 12px;
  margin: 0 auto;
  margin-top: 15px;
  color: #FFFFFF;
  background-color: #92D4EF;
}
</style>
